<template>
  <div>
    <shopdetail v-if="detail" :ordercode="ordercode" @out="out"></shopdetail>

    <div>
      <Header :type="'screening'" @tag="getList" @reset="reset">
        <div class="head-tit">
          内容筛选
        </div>

        <div class="head-operation">
          <span class="head-label">
            商品名称：
          </span>
          <el-input
            v-model.trim="goodsName"
            placeholder="请输入"
            size="small"
            class="head-input"
          >
          </el-input>
          <span class="head-label">
            订单编号：
          </span>
          <el-input
            v-model.trim="payOrder"
            placeholder="请输入"
            size="small"
            class="head-input"
          >
          </el-input>
          <span class="head-label">
            订单类型：
          </span>
          <el-select
            v-model="marketType"
            size="small"
            class="head-input"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            订单状态：
          </span>
          <el-select
            v-model="status"
            size="small"
            class="head-input"
            placeholder="待发货"
          >
            <el-option
              v-for="item in optionList1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="head-operation">
          <span class="head-label">
            查询时间：
          </span>
          <el-select
            v-model="timetype"
            size="small"
            class="head-input"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionList2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            选择时间：
          </span>
          <div class="head-time">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              style="width:100%;"
              size="small"
              :disabled="timetype == 0"
            >
            </el-date-picker>
          </div>
        </div>
      </Header>

      <div class="table-nav">
        <div class="nav-title-one ">商品信息</div>
        <div class="nav-title">实收款</div>
        <div class="nav-title">客户信息</div>
        <div class="nav-title">订单状态</div>
        <div class="nav-title">配送以及支付方式</div>
        <div class="nav-title">门店名称</div>
      </div>
      <div v-if="shows" class="nav-hiden">
        <span>暂无数据</span>
      </div>
      <Main v-else :type="'ordinary'" :footer-lock="totals > 10">
        <div class="list-table-content">
          <div v-for="item in listData" :key="item.id" class="table-body">
            <div class="nav">
              <ul>
                <li>订单编号: {{ item.pay_order }}</li>
                <li>订单来源: {{ item.order_from == 1 ? "小程序" : "" }}</li>
                <li>
                  操作:
                  <el-button type="text" @click="orderMsg(item.id)"
                    >订单详情</el-button
                  >
                </li>
              </ul>
              <ul>
                <li>下单时间: {{ item.ctime }}</li>
                <li>
                  订单类型:
                  {{
                    item.market_type == 0
                      ? "普通订单"
                      : item.market_type == 1
                      ? "拼团订单"
                      : item.market_type == 2
                      ? "限时折扣订单"
                      : item.market_type == 4
                      ? "积分消耗订单"
                      : "砍价订单"
                  }}
                </li>
              </ul>
            </div>

            <div class="table-content">
              <div class="shopbox">
                <div
                  v-for="arry in item.goods_list"
                  :key="arry.id"
                  class="shopboxf"
                >
                  <div class="imgs">
                    <img
                      :src="
                        $store.state.qiniu +
                          arry.uniquekey__cover +
                          $store.state.imgRotate
                      "
                      width="100%"
                      height="100%"
                    />
                  </div>
                  <ul>
                    <li class="goods-name">
                      {{ arry.goods__goods_name }}
                    </li>
                    <li v-if="item.order_type === 1" class="goods-info">
                      数量：{{ arry.nums }}
                      <span
                        v-for="(ele, index) in arry.sku_type"
                        :key="index"
                        style="line-height:15px;"
                        >【{{ ele }}】</span
                      >
                    </li>
                    <li v-if="item.order_type === 1" class="goods-info">
                      单价：¥{{ arry.uniquekey__sku_price }}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="box">
                <span>¥{{ item.need_pay }}</span>
              </div>
              <div class="box">
                <span>{{ item.member__nick_name }}</span>
              </div>
              <div
                v-if="
                  item.order_type != 5 &&
                    item.order_type != 2 &&
                    item.order_type != 4
                "
                class="box"
              >
                <div
                  :style="{
                    color:
                      item.status == 0 || item.status == 1 || item.status == 3
                        ? 'rgb(64, 158, 255)'
                        : item.status == 2
                        ? 'red'
                        : 'green'
                  }"
                >
                  {{
                    item.status == 0
                      ? "待支付"
                      : item.status == 1
                      ? "支付成功，待发货"
                      : item.status == 2
                      ? "支付取消"
                      : item.status == 3
                      ? "待收货"
                      : item.status == 4
                      ? "待评价"
                      : item.status == 5
                      ? "订单完成"
                      : item.status == 6
                      ? "待退款"
                      : item.status == 7
                      ? "拒绝退款"
                      : item.status == 8
                      ? "已退款"
                      : item.status == 9
                      ? "已支付，订单异常"
                      : item.status == 10
                      ? "支付成功拼团未成功"
                      : "退款失败"
                  }}
                </div>
                <div v-if="item.status == 1" style="margin-top: 8px">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="courier(item.id, item.distributiontype)"
                    >{{
                      item.distributiontype === 1 ? "发货" : "备货"
                    }}</el-button
                  >
                </div>
              </div>
              <div
                v-if="item.order_type == 5"
                class="box"
                style="color: green;"
              >
                <span>{{ item.status == 5 ? "充值成功" : "充值失败" }}</span>
              </div>
              <div
                v-if="item.order_type == 2"
                class="box"
                style=" color: green;"
              >
                <span>{{ item.status == 5 ? "购买成功" : "购买失败" }}</span>
              </div>
              <div
                v-if="item.order_type == 4"
                class="box"
                style="color: green;"
              >
                <span>{{ item.status == 5 ? "消费成功" : "消费失败" }}</span>
              </div>
              <div class="box">
                {{
                  item.distributiontype == 1
                    ? "商家配送"
                    : item.distributiontype == 2
                    ? "同城限时达"
                    : item.distributiontype == 3
                    ? "到店自提"
                    : "" || "暂无配送"
                }}
                - 线下支付
              </div>
              <div class="box">
                {{ item.store }}
                <!-- <div>
                  收货人:<span>&nbsp;&nbsp;{{ item.address__name }}</span>
                </div>
                <div
                  style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"
                >
                  收货地址:<span>&nbsp;&nbsp;{{ item.address__position }}</span>
                </div>
                <div>
                  收货电话:<span>&nbsp;&nbsp;{{ item.address__phone }}</span>
                </div>
                <div>配送时间:<span>&nbsp;&nbsp;立即配送</span></div> -->
              </div>
            </div>
          </div>
        </div>
      </Main>

      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>

      <el-dialog title="商品发货" :visible.sync="dialogVisible" width="25%">
        <div>
          <ul style="line-height:35px;">
            <li>
              <span>订单编号:</span>&nbsp;&nbsp;{{ couriernumber.pay_order }}
            </li>
            <li><span>下单时间:</span>&nbsp;&nbsp;{{ couriernumber.ctime }}</li>
            <li><span>收货信息:</span>&nbsp;&nbsp;{{ addressinfo }}</li>
          </ul>
        </div>
        <div style="margin-top:10px;">
          <span>发货方式:</span> &nbsp;&nbsp;
          <el-radio-group v-model="radio">
            <el-radio :label="1" :disabled="sendid == 2 || sendid == 3"
              >物流信息</el-radio
            >
            <el-radio :label="2" :disabled="sendid == 1">无需物流</el-radio>
          </el-radio-group>
        </div>
        <div style="margin-top:10px;">
          <el-form
            ref="form"
            :model="form"
            :rules="rule"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div v-if="kuaidi && sendid == 1">
              <el-form-item label="快递公司" prop="no">
                <el-select v-model="form.no" placeholder="请选择快递">
                  <el-option
                    v-for="(item, index) in couriercode"
                    :key="index"
                    :label="item.name"
                    :value="item.express_id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="快递单号" prop="orders" style="width:320px;">
                <el-input v-model="form.orders"></el-input>
              </el-form-item>
            </div>
            <el-form-item
              style="margin-top:20px; text-align:center;margin-left:0px;"
            >
              <el-button type="primary" @click="delivery('form')"
                >确定</el-button
              >
              <el-button @click="deliveryno('form')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { COURIER, COURIERFORM, ORDERMAGE } from "../../service";
export default {
  components: {
    shopdetail: () => import("../../component/shopdetail")
  },
  data() {
    return {
      detail: false,
      shows: true,
      goodsName: "",
      payOrder: "",
      timetype: "0",
      marketType: "all",
      status: "all",
      optionList: [
        { id: "all", name: "全部订单" },
        { id: 0, name: "普通订单" },
        { id: 1, name: "拼团订单" },
        { id: 2, name: "限时折扣订单" },
        // { id: 3, name: "分销订单" }
        { id: 4, name: "积分消耗订单" },
        { id: 5, name: "砍价订单" },
        { id: 6, name: "零元抽奖订单" }
      ],
      optionList1: [
        { id: "all", name: "全部" },
        { id: 0, name: "待付款" },
        { id: 1, name: "待发货" },
        { id: 3, name: "待收货" },
        { id: 5, name: "已收货" },
        { id: 2, name: "已取消" }
      ],
      optionList2: [
        { id: "0", name: "全部时间段" },
        { id: "ctime", name: "下单时间" },
        { id: "paytime", name: "支付时间" },
        { id: "send_time", name: "发货时间" }
      ],
      time: [],
      couriercode: [],
      couriernumber: [],
      addressinfo: [],
      kuaidi: true,
      sendid: [],
      dialogVisible: false,
      radio: 0,
      form: {
        orders: "",
        no: "",
        content: "",
        picture: ""
      },
      rule: {
        orders: [{ required: true, message: "请输入订单号", trigger: "blur" }],
        no: [
          {
            type: "integer",
            required: true,
            message: "请选择快递公司",
            trigger: "change"
          }
        ]
      },
      totals: 0,
      pages: 1
    };
  },
  created() {
    this.getList();
  },
  methods: {
    out() {
      this.detail = false;
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    // 发货 dialogVisible = true
    async courier(id, type) {
      this.ordercode = id;
      this.sendid = type;
      this.dialogVisible = true;
      if (type === 1) {
        this.radio = 1;
      } else {
        this.radio = 2;
      }
      await COURIER({
        order_id: this.ordercode
      }).then(res => {
        let { code } = res;
        this.couriercode = res.express;
        this.addressinfo = res.address_info;
        if (code === 200) {
          res.order_info.ctime =
            res.order_info.ctime != null
              ? this.times(parseInt(res.order_info.ctime))
              : "";
          this.couriernumber = res.order_info;
        }
      });
    },
    delivery(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          COURIERFORM({
            express_id: this.form.no,
            order_id: this.ordercode,
            no: this.form.orders
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "发货成功",
                type: "success"
              });
              this.dialogVisible = false;
            }
          });
          this.orderMAG();
        } else {
          return false;
        }
      });
      this.$emit("ship", "ship");
    },
    deliveryno(form) {
      this.$refs[form].resetFields();
      this.dialogVisible = false;
    },
    orderMsg(id) {
      this.detail = true;
      this.ordercode = id;
    },

    resetForm(form) {
      this.$refs[form].resetFields();
      this.dialogVisible = false;
    },
    times(timestamp) {
      var time = new Date(timestamp * 1000);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    reset() {
      this.goodsName = "";
      this.payOrder = "";
      this.timetype = "0";
      this.marketType = "all";
      this.status = "all";
      this.time = [];
      this.getList();
    },
    async getList() {
      await ORDERMAGE({
        page: this.pages,
        pageshow: 10,
        type: 3,
        goods_name: this.goodsName,
        pay_order: this.payOrder,
        market_type: this.marketType,
        status: this.status,
        time_type: this.timetype,
        stime: this.time[0] ? new Date(this.time[0]).getTime() / 1000 : "",
        etime: this.time[1] ? new Date(this.time[1]).getTime() / 1000 : ""
      }).then(res => {
        let { code, count } = res;
        if (code === 200) {
          this.totals = count;
          if (res.all_orders_info.length > 0) {
            this.shows = false;
          }
          res.all_orders_info.forEach(ele => {
            ele.ctime = this.times(parseInt(ele.ctime)) || "";
          });
          this.listData = res.all_orders_info;
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.table-nav {
  display: flex;
  background: #ebecf0;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: bold;
  padding-left: 58px;
  .nav-title-one {
    width: 24%;
    padding-left: 12px;
    box-sizing: border-box;
  }
  .nav-title {
    text-align: center;
    width: 15%;
  }
}
.nav-hiden {
  text-align: center;
  border-top: 1px solid gainsboro;
  height: 52px;
  line-height: 52px;
  font-size: 12px;
  background: #fff;
  margin-left: 1px;
  text-align: center;
}
.list-table-content {
  color: #595961;
  font-size: 12px;
  overflow: hidden;
  .table-body {
    width: 100%;
    height: 100%;
    background: #fff;
    border-top: 16px solid #f2f2f2;

    &:nth-child(1) {
      border-top: 0;
    }
    .nav {
      height: 120px;
      border-bottom: 1px solid #e8e8e8;
      padding-top: 26px;
      box-sizing: border-box;
      padding-left: 58px;
      ul {
        font-size: 14px;
        display: flex;
        height: 36px;
        line-height: 36px;
        li {
          width: 28%;
          span {
            font-weight: bold;
          }
        }
      }
    }

    .table-content {
      display: flex;
      padding-top: 20px;
      min-height: 120px;
      padding-left: 58px;
      .box {
        text-align: center;
        margin-top: 15px;
        width: 15%;
      }
      .shopbox {
        width: 24%;
        .shopboxf {
          margin-bottom: 16px;
          display: flex;
          .imgs {
            width: 70px;
            height: 70px;
          }
          ul {
            margin-left: 12px;
            .goods-name {
              font-weight: 700;
              font-size: 14px;
            }
            .goods-info {
              color: inherit;
              display: block;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
